<template>
  <div>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey" @change="showTwo">
          <van-sidebar-item v-for="(item,index) in nav" :key="index" :title="item.anchor_point" />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <goods-card
          v-for="(item,index) in list"
          :key="index"
          :title="item.comm_message"
          :imgurl="item.comm_image"
          :price="item.comm_price"
          :addnum="0"
          bgcolor="#009FD8"
          @oncarts="addCart(item)"
          @subcarts="subCart(item)"
        ></goods-card>
      </van-col>
    </van-row>

    <div class="nav">
      <van-row>
        <van-col span="8">
          <van-icon name="cart-o" size="30px" color="red" @click="showPopup" :badge="carts.length"/>
        </van-col>
        <van-col span="8">总价{{zj}}</van-col>
        <van-col span="8" class="js">结算</van-col>
      </van-row>
    </div>

    <van-popup v-model="show" position="bottom" :style="{ height: '30%'}">
      <div class="na">
        <van-icon name="delete" class="del" @click="del" />
      </div>

      <!-- 加入购物车 -->
      <van-card
        v-for="(item,index) in carts"
        :key="index"
        :price="item.it.comm_price*item.num"
        :title="item.it.comm_title"
        :thumb="item.it.comm_image"
      >
        <template #num>
          <van-stepper v-model="item.num" />
        </template>
      </van-card>
    </van-popup>
  </div>
</template>

<script>
import goodsCard from "@/components/GoodsCard.vue";
export default {
  components: {
    "goods-card": goodsCard,
  },
  data() {
    return {
      nav: [],
      list: [],
      carts: [],
      activeKey: 0,
      show: false,
    };
  },
  created() {
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      // console.log(res.data);
      // console.log(res.data.commodity_list.comm_price);
      this.nav = res.data;
      this.list = res.data[0].commodity_list;
    });

    //初始化购物车
    let carts = localStorage.carts;
    if (carts) {
      this.carts = JSON.parse(carts);
    }
  },computed:{
    zj(){
      let nut =0
      console.log(this.carts)
      this.carts.map((item)=>{
        // console.log(item.num)
        nut+=item.num*item.it.comm_price
        // console.log(nut)
      })
      return nut
    }

  },
  methods: {
      addCart(item) {
      let set = true
       this.carts.map(i=>{
         if(i.it.cid == item.cid){
           set=false
           i.num++
         }
       })

    if(set){
        this.carts.push({
        it:item,
        num:1
      });
    }
      localStorage.carts = JSON.stringify(this.carts);
       
    },
    subCart(item) {
      let index = this.carts.indexOf(item);
      this.carts.splice(index, 1);
      localStorage.carts = JSON.stringify(this.carts);
    },
    showTwo(index) {
      this.list = this.nav[index].commodity_list;
    },
    showPopup() {
      this.show = true;
    },
     del() {
      this.$dialog
        .confirm({
          message: "确定要清空购物车吗？",
        })
        .then(() => {
          this.carts = [];
          localStorage.carts = JSON.stringify(this.carts);
        });
    },
  },
};
</script>

<style scoped>
.nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  bottom: 0px;
  background: #eee;
}
.js {
  background: red;
  color: #fff;
}

.del {
  padding-right: 0px;
}
</style>